import React from 'react'
import { inject, observer } from 'mobx-react';
import { toJS } from 'mobx'
import { Icon, List, Tools } from 'weaver-mobile'
import { Form, RouteLayout } from 'weaver-mobile-page';
const ButtonGroup = RouteLayout.ButtonGroup;
const getLabel = Tools.getLabel;
@inject('wfAgentStore')
@observer
export default class EditDetails extends React.Component {
    componentWillMount() {
        const { location, wfAgentStore } = this.props;
        const { getPageTitle } = wfAgentStore;
        const { pathname = "" } = location;
        getPageTitle(pathname);
    }
    componentDidMount() {

    }
    componentWillUpdate() {
        const { location, wfAgentStore } = this.props;
        const { getPageTitle } = wfAgentStore;
        const { pathname = "" } = location;
        getPageTitle(pathname);
    }
    onChange = (condition, value) => {
        const { editAgent, setEditAgent } = this.props.wfAgentStore;
        const { detailForm, datas, detailDataId } = editAgent;
        if (condition.domkey[0] === "agentbatch") {
            let newArr = value.split(".");
            //一开始就是【.】不行，超过一个【.】不行，有其他字符不行
            // if()
            var reg = /^[0-9|/.]+$/;
            if ((reg.test(value) && value.substr(0, 1) !== "." && newArr.length < 3) || value === "") {
                detailForm.onChange(condition, value);
            }
        } else {
            detailForm.onChange(condition, value);
        }

        let newDatas = [...toJS(datas)];
        for (let i = 0; i < newDatas.length; i++) {
            if (newDatas[i].id === detailDataId) {
                if (condition.domkey[0] === "isCreateAgenter" || condition.domkey[0] === "isSysCreateAgenter" || condition.domkey[0] === "isPendThing" || condition.domkey[0] === "isProxyDeal") {
                    if (value === 1) {
                        value = getLabel(163,"是");
                    } else if (value === 0) {
                        value = getLabel(161,"否");
                    }
                }
                newDatas[i] = { ...newDatas[i], [condition.domkey[0]]: value }
                if (condition.domkey[0] === "agentuid") {
                    if (toJS(value)[0].id) {
                        newDatas[i] = { ...newDatas[i], agentuid: toJS(value)[0].id, agentuidspan: toJS(value)[0].name }
                    } else {
                        newDatas[i] = { ...newDatas[i], agentuid: "", agentuidspan: "" }
                    }
                }
            }
        }
        setEditAgent({ datas: newDatas })
    }

    getSearchs = () => {
        const { editAgent } = this.props.wfAgentStore;
        const { detailForm, conditioninfo, datas } = editAgent;
        // let newDatas = [...toJS(datas)];
        let items = [];
        let formParams = detailForm.formParams;
        if (toJS(conditioninfo).length > 0) {
            let fields = toJS(conditioninfo)[0];
            fields.items.map(field => {
                if (field.domkey[0] === "conditioncn") {
                    items.push(
                        <div className="wf-agentDetails-conditioncn" key={field.domkey.join('__')}>
                            <Form.Item
                                key={field.domkey.join('__')}
                                form={detailForm}
                                fieldConfig={field}
                                onChange={this.onChange}
                            />
                        </div>
                    );
                } else {
                    if (!((field.domkey[0] === "isPendThing" && !formParams.isProxyDeal) || (field.domkey[0] === "isSysCreateAgenter" && !formParams.isCreateAgenter))) {
                        items.push(
                            <Form.Item
                                key={field.domkey.join('__')}
                                form={detailForm}
                                fieldConfig={field}
                                onChange={this.onChange}
                            />
                        );
                    }
                }
                return field;
            })
        }
        const group = (
            <Form>
                <List>
                    {items}
                </List>
            </Form>
        )
        return group;
    }
    render() {
        const { editAgent, moveLine, addAgenterMsg, deleteLine } = this.props.wfAgentStore;
        const { detailDataId, isHasPre, isHasNext } = editAgent;
        let buttonGroupData = [
            {
                key: "1",
                text: <div className="bottom-wrap-icon">
                    <Icon type="changjiantou-left" className={isHasPre ? "changjiantou-left-active" : "changjiantou-left"} />
                </div>,
                onClick: () => { moveLine(1) }
            },
            {
                key: "2",
                text: <div className="bottom-wrap-icon">
                    <Icon type="shanchu" className="shanchu" />
                </div>,
                onClick: () => {
                    deleteLine(detailDataId, this.props.history, true)
                }
            },
            {
                key: "3",
                text: <div className="bottom-wrap-icon">
                    <Icon type="tianjia" className="tianjia" />
                </div>,
                onClick: () => {
                    addAgenterMsg()
                }
            },
            {
                key: "4",
                text: <div className="bottom-wrap-icon" >
                    <Icon type="changjiantou-right" className={isHasNext ? "changjiantou-left-active" : "changjiantou-left"} />
                </div>,
                onClick: () => {
                    moveLine(0)
                }
            },
        ]
        return (
            // <RouteLayout>
            <div className='editDetails'>
                <div className="wd-agent-editdetails-wrap" >
                    {this.getSearchs()}
                </div>
                <ButtonGroup data={buttonGroupData} />
                {/* <div className="bottom-part" >
                        <div className="bottom-wrap-icon" onClick={() => { moveLine(1) }}>
                            <Icon type="changjiantou-left" className={isHasPre ? "changjiantou-left-active" : "changjiantou-left"} />
                        </div>
                        <div className="bottom-wrap-icon" onClick={() => { deleteLine(detailDataId, this.props.history, true) }}>
                            <Icon type="shanchu" className="shanchu" />
                        </div>
                        <div className="bottom-wrap-icon" onClick={() => { addAgenterMsg() }}>
                            <Icon type="tianjia" className="tianjia" />
                        </div>
                        <div className="bottom-wrap-icon" onClick={() => { moveLine(0) }}>
                            <Icon type="changjiantou-right" className={isHasNext ? "changjiantou-left-active" : "changjiantou-left"} />
                        </div>
                    </div> */}
            </div>
            // </RouteLayout >
        )
    }




}